<template>
  <div class="custom-search">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      size="default"
      status-icon
    >
      <el-row :gutter="20">
        <el-col :span="4.5">
          <el-form-item label="商品编号" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="4.5">
          <el-form-item label="项目课程编号" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="4.5">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="4.5">
          <el-form-item label="商品类型" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品有效期" prop="name">
            <el-date-picker
              style="width: 100%"
              v-model="ruleForm.name"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="发布时间" prop="name">
            <el-date-picker
              v-model="ruleForm.name"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="上架时间" prop="name">
            <el-date-picker
              v-model="ruleForm.name"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下架时间" prop="name">
            <el-date-picker
              v-model="ruleForm.name"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button style="margin-left: 10px">重置</el-button>
          <el-button type="primary">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="custom-content">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="全部" name="1">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="商品编号" width="180" />
          <el-table-column prop="name" label="项目课程编码" width="180" />
          <el-table-column prop="address" label="商品名称" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待上架" name="2">Config</el-tab-pane>
      <el-tab-pane label="上架中" name="3">Role</el-tab-pane>
      <el-tab-pane label="已下架" name="4">Task</el-tab-pane>
    </el-tabs>
  </div>
  <!-- <div class="custom-paging">分页</div> -->
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { TabsPaneContext } from 'element-plus'

interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  type: string[]
  resource: string
  desc: string
}

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive<RuleForm>({
  name: 'Hello',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change'
    }
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change'
    }
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change'
    }
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change'
    }
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change'
    }
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change'
    }
  ],
  desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
})

const activeName = ref('1')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
</script>
<style lang="scss" scoped></style>
